Digitale und interaktive Medien – etwa Webseiten, Präsentationsfolien, Lernplattformen, Lern-Apps oder Screencasts – sollen Informationen so vermitteln, dass sie kognitiv leicht erfasst, verstanden und nachhaltig behalten werden können.
Die folgenden Designprinzipien unterstützen dich dabei, digitale Medien wirkungsvoll, benutzerfreundlich und lernförderlich zu gestalten.
1. Planung & Projektmanagement
Eine durchdachte Planung ist die Voraussetzung für verständliche und konsistente digitale Produkte. Bereits vor der Gestaltung sollten folgende Fragen geklärt werden:
- Wer ist die Zielgruppe?
- Mit welchem Gerät wird das Produkt genutzt (Laptop, Tablet, Smartphone)?
- Welche Medien sollen integriert werden (Video, Bild, Audio)?
- Welche Abläufe und Interaktionen sind notwendig (Navigation, Aufgaben, Rückmeldungen)?
Eine logische Struktur erleichtert den späteren Designprozess und sorgt dafür, dass Informationen klar und nachvollziehbar aufgebaut werden.
Weitere Informationen zu
Konzeptarbeit.
2. Spezifische Designprinzipien im digitalen oder interaktiven Kontext
Generell gelten auch innerhalb eines digitalen oder interaktiven Kontexts die
grundlegenden Prinzipien. Folgend werden spezifische oder ergänzende Prinzipen aufgeführt, die helfen sollen, ein digitales und/oder interaktives Produkt wirkungsvoll zu gestalten.
A) Benutzeroberfläche
Die Benutzeroberfläche ist der visuelle und funktionale Rahmen eines digitalen Produkts. Ein gutes UI vermeidet Überforderung, ist intuitiv bedienbar und unterstützt den Lernprozess.
Zu Beginn des Designprozesses muss meistens ein Seitenverhältnis gewählt werden. Dies hängt aber von der Software und dem Endgerät ab. Je nach dem für welche Anwendung und welches Device, empfiehlt sich ein anderes Format. (Konzeptfrage: Mit welchem Gerät wird die Anwendung genutzt? Laptop? Web?).
Generell ist es empfehlenswert, das Standard-Querformat 16:9 zu nutzen. Es ist ein längliches Format, das beim Gestalten herausfordernd sein kann. Der grosse Vorteil ist, dass z.B. exportiere Folien (von PowerPoint) ohne Änderung in einen Film integriert werden können. Ein Slidecast oder Screencast ist somit schneller und effizienter hergestellt, weil das Format schon stimmt. Bilder (z.B. interaktiv) können in ein Videoformat eingebettet werden. Bei einer Webanwendung werden Bilder im Querformat 16:9 vollständig und ohne zu scrollen angezeigt.
Hochformat ist für smartphonebasierte Anwendungen empfehlenswert.
Für Anwendungen, die sich einem Gerät anpassen, ist die Skalierbarkeit der Benutzeroberfläche und den einzelnen Elementen (inkl. neue Anordnung) und die Erweiterbarkeit (sog. Responsive Design) von Bedeutung. In der Regel übernimmt eine Software die Anpassung. Dennoch empfiehlt es sich, schon im Designprozess regelmässig auf allen Geräten Tests durchzuführen.
B) Wireframes und Designgrundlagen
Für den Aufbau und die Strukturierung der Benutzeroberfläche ist die Auseinandersetzung mit den
Layout-Grundlagen,
Raster,
Farbwahl,
Typografie, und
Bildsprache empfehlenswert.
Typische Wireframe-Entscheidungen:
- Wo befindet sich die Navigation?
- Wie sind Text, Medien und Interaktionen angeordnet?
- Welche Elemente sollen als Erstes ins Auge fallen?
Bei der Webanwendung können Elemente dynamisch sein (die Grösse und Position der Elemente oder auch Textgrösse ist anhängig von der Grösse des Browserfensters). Dies erschwert einerseits den Designprozess - andererseits ermöglicht es eine uneingeschränkte Anwendung bei verschiedenen Internet-Browsern und Geräten.
Falls ein Interaktionskonzept vorliegt empfiehlt sich, eine genügend lange Testphase einzuplanen.
Sieht das Konzept vor, viele
Ressourcen und grossen Datenmengen (z.B. qualitative und lange Videos) einzubinden, ist es wichtig, vorab die
Performance der Plattform, der Webapplikation, der Webseite etc. zu prüfen. Allenfalls empfiehlt es sich, die Daten zu reduzieren oder extern zu speichern.
Siehe auch
Medien nutzen und teilen.
C) Navigation und Struktur
Benutzerführung und Navigation sind im digitalen Bereich und bei Lerneinheiten von grosser Bedeutung. Je besser durch die Einheiten geführt wird (z.B. zusammenhänge Bereiche verlinkt sind), desto einfacher ist das Lernen und Verstehen. Nutzer:innen sollen jederzeit wissen:
- Wo bin ich?
- Wo kann ich hin?
- Wie komme ich zurück?
Navigationskonzept, Struktur und Hierarchie des Inhaltes sind vorab zu definieren, damit die Interaktion im digitalen Raum intuitiv und nicht hinderlich ist. Kontraproduktiv heisst zum Beispiel: Verlinkungen funktionieren nicht, es werden auf irreführende Inhalte verwiesen oder die Navigation oder Buttons sind so angeordnet, dass sie nicht ersichtlich sind.
Auch bei interaktiven Medienproduktion wie Bilder (z.B. Lernlandkarte), interaktiven Videos (z.B. H5P) und Audiodateien ist ein roter Faden Voraussetzung für eine lernfreundliche Bedienung.
Wichtige Prinzipien:
- Konsistente Platzierung von Menü, Buttons und Links
- Logische Abläufe von Schritten, Seiten oder Modulen
- Klare Bezeichnungen (keine unnötigen Fachbegriffe in Navigationselementen)
- Visuelle Hinweise für Interaktivität (z. B. Buttons, Hover-Effekte)
Eine nachvollziehbare Struktur ist zentral – besonders wenn interaktive Elemente integriert werden.
D) Vorteile von interaktiven Elementen
- Klickbare Elemente wie verknüpfte Bilder, Icons, Grafiken, Textelemente, Videos oder Audios fördert die aktive Teilnahme der Nutzer:innen. Sie wechseln von einer passiven Rolle zum bestimmenden Anwender:in.
- Eine interaktive Benutzersteuerung ermöglicht den Anwender:innen selbst zu bestimmen, welche Inhalte, in welcher Reihenfolge sie konsumieren möchten. Eine individuelle Navigation bedeutet den Nutzer:innen die Entscheidung zu überlassen, ob und welche Informationen gelesen werden.
- Die Anwendung von Animations- und Bewegungseffekten überrascht und erhöht die Aufmerksamkeit. Animierte Interaktionen und spielerische Anwendungen können als ansprechender und unterhaltsamer empfunden werden (z.T. und auch motivierender). Zu viele bewegte Elemente sind jedoch kontraproduktiv.
- Animationen bei PowerPoint sind, sofern sie aufbauend und kohärent eingesetzt werden, empfehlenswert. Der Inhalt erscheint nach und nach und die/der Betrachter:in kann gezielt durch komplexe Inhalte geführt werden.
Interaktive Medien bieten Mehrwert, wenn sie Lernprozesse unterstützen, z. B.:
- Quizze
- klickbare Bereiche
- gesteuerte Abläufe
- Feedbackmechanismen
- explorative Inhalte (z. B. aufklappbare Bereiche)
Interaktivität muss zielgerichtet eingesetzt werden: Sie soll Orientierung bieten, nicht ablenken.
Der folgende animierte Button bietet keinen zusätzlichen Nutzen. Empfehlenswert ist eine statische Lösung mit klar erkennbarer Navigation.
Weiter zum Thema Animation
GIF von Ekaterine Kantaria von Pixabay. Die obenstehende Animation ist kein OER.
3. Multimedia-Prinzip
Wenn Inhalte gleichzeitig aus mehreren verschiedenen Medienarten bestehen, sollten folgende Kombinationen vermieden werden: Viel Text und gleichzeitige Sprache (oder Audioaufnahme). Dies führt zu einer kognitiven Überlastung. Deshalb sollte weder bei Präsentationen noch bei (Erklär)Videos etc. Text und Gesprochenes gleichzeitig gezeigt werden.
Hingegen eignen sich auditive und visuelle Medien als Kombination sehr gut. Studien belegen, dass mündliche Informationen leichter erfasst werden können, wenn sie bildlich unterstützt werden.
4. Kohärenzprinzip
Das Kohärenzprinzip besagt, dass unnötige Elemente und Ablenkungen vermieden werden sollen. Visuelle Elemente sollen auf das Wesentliche beschränkt werden. Eine Reduktion an animierten und interaktiven Elementen ist ebenfalls sinnvoll - je weniger bewegte Elemente, desto mehr fallen sie auf.
Das heisst: Alles Überflüssige entfernen! Dazu gehören: dekorative Elemente, unnötige Bilder, überladene Grafiken, ablenkende Musik. Kohärenz reduziert die kognitive Belastung.
Mehr zum Kohärenzprinzip
5. Signalisierungsprinzip: räumliche und zeitliche Nähe
Die Herausforderung ist, dem/der Anwender:in zu zeigen, worauf er/sie genau achten soll. Die
wichtigen Informationen, die zusammengehören, sollten räumlich und zeitlich nahe präsentiert werden, um Zusammenhänge zu verdeutlichen und diese möglichst leicht erfassen zu können.
Räumliche Nähe bezieht sich auf die geringe räumliche Entfernung zwischen Elementen in einem Layout. Inhalte, die zusammengehören, sollten räumlich als zusammengehörig wahrgenommen werden können.
Zeitliche Nähe bezieht sich auf aufeinanderfolgenden Elemente. Wenn Inhalte in einer zeitlichen Abfolge präsentiert werden (z. B. in einer PowerPoint Präsentation oder einer Diashow), sollten sie so angeordnet sein, dass der Zusammenhang leicht erkennbar wird. Elemente, die zeitlich zusammengehören, sollten also auch zeitlich nahe präsentiert werden. Diese Prinzipien tragen dazu bei, dass visuelle Botschaften klar und verständlich sind, indem sie die kognitive Verarbeitung erleichtern.
Räumliche und zeitliche Nähe anhand eines Beispiels
Um das Lernen zu unterstützen, gehören zusammenhängende Bilder und Texte räumlich eng zueinander – nicht getrennt.
Durch die weite Trennung von Bild und Text kommt es zu ständigen Verständnisunterbrüchen, weil die passenden Informationen nicht sofort auffindbar sind.
Stehen Bild und Text nah beieinander, lässt sich der Prozess besser verstehen.
6. Redundanz-Prinzip
Das Vermeiden von gleicher Information in verschiedenen Darstellungsformen fördert das einfachere Erfassen eines Videos, Präsentation oder interaktiven Elements. Wenn aber zu viele redundante Elemente vorhanden sind, kann dies zu einer kognitiven Überlastung führen. Es besteht die Schwierigkeit das Wesentliche zu erkennen. Wenn redundante Informationen mehrfach rezipiert werden, wird das Gehirn überflüssig stark in Anspruch genommen.
Die gleiche Botschaft in einem anderem Format zu wiederholen, sollte vermieden werden.
7. Vorteile gut gestalteter digitaler Medien
Gut durchdachte digitale Medien…
- erleichtern Orientierung
- reduzieren kognitive Belastung
- verbessern Lernprozesse
- lassen sich leichter bedienen
- wirken konsistent und professionell
Diese Wirkung entsteht nur, wenn Gestaltung, Struktur und Didaktik zusammenarbeiten.
8. Checklisten
Checkliste Benutzeroberfläche
- Passendes Format gewählt (z. B. 16:9, Hochformat)
- Layout konsistent
- Schriftgrössen gut lesbar
- Genügend Kontrast
- Inhalte klar gruppiert
Checkliste Navigation
- Navigation klar sichtbar
- Eindeutige Bezeichnungen
- Schritte logisch aufgebaut
- „Zurück“- und „Weiter“-Funktionen klar erkennbar
Checkliste Multimedia-Prinzipien
- Bild + verbaler Text sinnvoll kombiniert
- Keine dekorativen Ablenkungen
- Wichtiges klar hervorgehoben
- Bild/Text räumlich beieinander
Weiterführende Informationen
à propos:
